layout 属性

我們可以使用 layout 屬性來套用放置於 layouts 的布局。

export default {
  layout: 'FrontEnd',
  // 或
  layout(context) {
    return 'FrontEnd'
  }
}

關於 layouts 可洽此系列文DAY2 起手式--Nuxt.js目錄結構

loading 属性

Nuxt.js 送我們免費的進度條，在頁面切換的時候，Nuxt.js 使用內置的加載組件顯示。
我們可以在 pages 元件的 loading 決定我們是否要啟用他。
預設值是 true ，如有特定頁面不想使用，就可以自行設定成 false 。
如果所有頁面都不想啟用的話，請洽 nuxt.config.js

module.exports = {
  loading: false
}

那我們又要如何使用呢？非常簡單。

• 啟動　this.$nuxt.$loading.start()
• 結束　this.$nuxt.$loading.finish()

範例如下

export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

溫馨提醒：
如果要在 mounted 方法中啟動它，請確保使用 this.$nextTick 來調用它，因為 $loading 可能無法立即使用。

客製化樣式

免費送的進度條，還可以自己客製化樣式，想要調整顏色或尺寸，一樣請洽 nuxt.config.js
例如想要改成藍色，高度 5px 都沒有問題！

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自幹樣式

什麼？你覺得免費的很醜不喜歡，沒關係我們可以自己刻一個，沒問題！
首先我們需要在 components 目錄下創建自定義的加載組件，如 components/loading.vue。
接著這個元件可以透過幾種方法了解 loading 狀態作使用，最簡單的兩種方法

• start() ：路由更新時，進度條該出來上工了。
• finish()：路由更新完畢時，進度條就放工了。

直接上基本配置範例，歡迎自行新增樣式。

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

最後最後，記得要通知 nuxt.config.js 一聲，我們要換成自己的 loading 元件囉！

module.exports = {
  loading: '~/components/loading.vue'
}

middleware 属性

還記得系列文DAY2 起手式--Nuxt.js目錄結構我們提過的 middleware 資料夾嗎？
沒錯，就是拿來放驗證的那個！
其實不管是 layouts 、 pages 、 components 的頁面，都可以綁驗證。
執行的順序也是由大到小，所以會依照 layouts 、 pages 、 components 的順序執行。

那到底要驗證什麼？要怎麼做呢？

例如我們轉跳到結帳頁面前，需驗證使用者是否已登入帳號，那我們就可以在 middleware 寫好一個登入驗證，驗證使用者是否已登入，若沒登入就給我回去login登入吧！
middleware/authenticated.js

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

之後在結帳頁面元件，使用 middleware 屬性綁定剛剛寫好的驗證檔案即可。

export default {
    middleware: 'authenticated'
  }

scrollToTop 属性

Nuxt.js 滿貼心的，切換頁面的時候會自己幫我們把頁面滾動到頂部，但如果是嵌套子路由就不滾了。
所以如果想要滾、或不想要滾，都沒問題，直接在 scrollToTop 改就可以了。

export default {
    scrollToTop: true
  }

validate 方法

有用到動態路由的話，就一定會有動態路由參數，可不可以判斷參數是否有效呢？
我們可以透過 validate 方法來做驗證。

export default {
  validate({ params, query, store }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

return 值有兩種可使用

• true ：　參數有效，沒毛病。
• false ：　參數有病，停止渲染跳404送你離開千里之外。

watchQuery 属性key 属性

結語

老實說還有三個沒提到的屬性，研究了一下還是不甚了解，想想還是先不提，我們先欠著好嗎？
如果未來有想明白了，或許我還是可以回來補充說明一下。